<template>
	<el-row class="board-page-wrapper">
		<section class="query-container">
			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">学年*</span>
					<el-select size="small" v-model="query.schoolYear">
						<el-option v-for="(item, index) in studyYearList" :label="item.dictLabel" :value="item.dictLabel"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="9">
					<el-col :span="12">
						<span class="query-label">校区*</span>
						<el-select size="small" v-model="query.campus">
							<el-option v-for="(item, index) in schoolList" :label="item.dictLabel"
								:value="item.dictSort" :key="item.dictLabel"></el-option>
						</el-select>
					</el-col>
					<el-col :span="12">
						<span class="query-label">楼号*</span>
						<el-select size="small" v-model="query.buildingNo">
							<el-option v-for="(item, index) in floorList" :label="item.label" :value="item.id"
								:key="item.id"></el-option>
						</el-select>
					</el-col>
				</el-col>
				<el-col :span="9">
					<span class="query-label">场地类别</span>
					<div class="two-box">
						<el-select size="small" v-model="query.siteType">
							<el-option v-for="(item, index) in fieldBrandList" :label="item.label" :value="item.id"
								:key="item.id"></el-option>
						</el-select>
						<!-- <el-select size="small" v-model="query.fieldBrandChoose" style="margin-left: 10px;">
							<el-option v-for="(item, index) in fieldBrandList" :label="item.label" :value="item.id"
								:key="item.id"></el-option>
						</el-select> -->
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">座位数</span>
					<div class="option-box">
						<el-input size="small" v-model="query.seatBegin"> </el-input><span
							style="margin: 0 8px;">至</span>
						<el-input size="small" v-model="query.seatEnd"> </el-input>
					</div>
				</el-col>
				<el-col :span="9">
					<span class="query-label">场地名称</span>
					<el-input size="small" placeholder="请输入" v-model="query.siteName"> </el-input>
				</el-col>
				<el-col :span="9">
					<span class="query-label">周次</span>
					<el-select size="small" v-model="query.weekly">
						<el-option v-for="(item, index) in weekTimeList" :label="item.label" :value="item.id"
							:key="item.id"></el-option>
					</el-select>
				</el-col>
			</el-row>

			<el-row :gutter="10">
				<el-col :span="6">
					<span class="query-label">星期</span>
					<el-select size="small" v-model="query.week">
						<el-option v-for="(item, index) in weeklist" :label="item.dictLabel" :value="item.dictValue"
							:key="item.dictLabel"></el-option>
					</el-select>
				</el-col>
				<el-col :span="9">
					<span class="query-label">节次</span>
					<el-select size="small" v-model="query.section">
						<el-option v-for="(item, index) in sectionlist" :label="item.dictLabel" :value="item.dictValue"
							:key="item.dictLabel"></el-option>
					</el-select>
					</el-select>
				</el-col>
				<el-col :span="9" style="display: flex;flex-direction: row-reverse;">
					<el-button size="small" style="margin-left: 10px;" @click="resetQuery">清空</el-button>
					<el-button size="small" @click='btn()'>搜索</el-button>
				</el-col>
			</el-row>
		</section>
		<section class="board-table-wrapper">
			<el-table :data="tableData" :border="true" style="width: 100%" ref="table">
				<el-table-column type="selection" width="45" align="center"> </el-table-column>
				<el-table-column prop="id" label="场地编号" align="center"> </el-table-column>
				<el-table-column prop="JSMC" label="场地名称" align="center"> </el-table-column>
				<el-table-column prop="XQJ" label="校区" align="center"> </el-table-column>
				<el-table-column prop="JSLX" label="场地类别" align="center"> </el-table-column>
				<el-table-column prop="ZWS" label="座位数" align="center"> </el-table-column>
				<el-table-column prop="KSZWS" label="考试座位数" align="center"> </el-table-column>
				<el-table-column prop="JXLH" label="楼号" align="center"> </el-table-column>
				<el-table-column prop="JXLH" label="楼层号" align="center"> </el-table-column>
				<el-table-column prop="achieveAllowance" label="场地借用类型" align="center"> </el-table-column>
			</el-table>
		</section>
	</el-row>
</template>

<script>
	import {
		getClassroom
	} from '@/api/public/index.js'

	export default {
		data() {
			return {
				query: {
					schoolYear: '', //学年
					campus: "", //校区
					weekly: "", //周次
					week: "", //星期
					section: "", //节次
					siteName:"",//场地名称
					seatBegin:"",//座位数开始
					seatEnd:"",//座位数结束
					siteType:"",//场地类型
					buildingNo:"",//楼号
					pageNum1:1,
					pageSize1:10
				},

				studyYearList: [],
				schoolList: [],
				floorList: [],
				fieldBrandList: [],
				weeklist: [],
				sectionlist: [],
				weekTimeList: [{
					value: 1,
					label: '全部2'
				}],
				tableData: []
			}
		},
		mounted() {
			// this.$nextTick(() => {
			//   this.$refs.table.doLayout(); //解决表格错位
			// });
			this.content_data('school_year_type')
			this.content_data('campus_type')
			this.content_data('keekly_type')
			this.content_data('week_type')
			this.content_data('section_type')
		},
		methods: {
			/* 清空 */
			resetQuery() {
				this.query={
					schoolYear: '', //学年
					campus: "", //校区
					weekly: "", //周次
					week: "", //星期
					section: "", //节次
					siteName:"",//场地名称
					seatBegin:"",//座位数开始
					seatEnd:"",//座位数结束
					siteType:"",//场地类型
					buildingNo:"",//楼号
					pageNum1:1,
					pageSize1:10
				}
			},
			hq() {
				getClassroom(this.query).then(res => {
						if(res.code==200){
							this.$message({
							         showClose: true,
							         message: res.msg,
							         type: 'success'
							       });
							this.tableData=res.data
						}else{
							this.$message({
							        showClose: true,
							        message: res.msg
							      });
						}
				})
			},
			/* 搜索 */
			btn(){
				console.log(this.query)
				this.hq()
			},
			content_data(type) {
				this.getDicts(type).then(res => {
					var obj = {}
					if (res.code === 200) {

						switch (type) {
							/* 学年 */
							case 'school_year_type':
								this.studyYearList = res.data
								break;
								/* 校区 */
							case 'campus_type':
								this.schoolList = res.data
								break;
								/* 周次 */
							case 'keekly_type':
								this.weekTimeList = res.data
								break;
								/* 星期 */
							case 'week_type':
								this.weeklist = res.data
								break;
								/* 节次 */
							case 'section_type':
								this.sectionlist = res.data
								break;
							default:
								break;
						}
					}
				})
			}
		},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.board-page-wrapper {
		padding: 10px;

		.query-container {
			padding: 10px 30px;
			display: flex;
			margin-left: -15px;
			margin-right: -15px;
			flex-wrap: wrap;

			.el-row {
				line-height: 32px;
				padding: 5px 15px;
				width: 100%;

				.el-col {
					display: flex;
					flex-wrap: nowrap;

					.query-label {
						width: 70px;
						text-align: right;
						margin-right: 5px;
					}

					.el-input,
					.el-select {
						width: calc(100% - 70px);
					}

					.two-box {
						display: flex;
					}

					.option-box {
						display: flex;
						width: 100%;
						flex: 1;
						justify-content: space-between;
					}
				}
			}

			&>div {
				line-height: 32px;
				padding: 0 15px;
			}
		}
	}
</style>
